<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/head :: common_head(~{::title},~{},~{},~{})">
    <title>博文列表</title>
</head>
<body>
<header th:replace="admin/header :: common_header" class="header"></header>

<div class="d-flex align-items-stretch">
    <!-- 左边菜单 -->
    <nav th:replace="admin/menu :: common_menu" id="sidebar"></nav>
    <!-- 内容部分 -->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">首页</h2>
            </div>
        </div>
        <section class="no-padding-top no-padding-bottom">
            <div class="card">
                <div class="card-header" style="color: #8a8d93; font-size: 16px">博文列表</div>
                <div class="card-body">
                    <nav class="navbar navbar-dark bg-dark ">
                        <a th:href="articleEdit" class="navbar-brand">创建博客</a>
                        <form action="articleList" method="post" class="form-inline">
                            <input id="search" name="search" th:value="${search}" class="form-control mr-sm-2" type="search" placeholder="输入关键字..." aria-label="Search">
                            <button class="btn btn-primary my-2 my-sm-0" type="submit">查询</button>
                        </form>
                    </nav>
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>标题</th>
                            <th>内容</th>
                            <th>类型</th>
                            <th>分类</th>
                            <th>是否启用</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:if="${aList.list.size()} eq 0">
                            <td colspan="9">暂无数据</td>
                        </tr>
                        <tr th:each="article,i:${aList.list}">
                            <td th:text="${article.articleId}" th:title="${article.articleId}"></td>
                            <td th:text="${article.title}" th:title="${article.title}"></td>
                            <td th:text="${article.summary}" th:title="${article.summary}"></td>
                            <td th:text="${article.typeName}" th:title="${article.typeName}"></td>
                            <td th:text="${article.classifyName}" th:title="${article.classifyName}"></td>
                            <td>
                                <div class="custom-control custom-switch">
                                    <input th:id="enable+${i.count}" type="checkbox" class="custom-control-input" th:onclick="isEnable('isArticleEnable',[[${article.articleId}]],[[${article.enable}]])" th:checked="${article.enable == 1}">
                                    <label data-th-for="enable+${i.count}" class="custom-control-label"></label>
                                </div>
                            </td>
                            <td th:text="${article.createDate}" th:title="${article.createDate}"></td>
                            <td th:text="${article.updateDate}" th:title="${article.updateDate}"></td>
                            <td>
                                <button type="button" class="btn btn-primary" th:onclick="edit('qryByArticleId',[[${article.articleId}]])">修改</button>
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delModal" th:onclick="to('delInput',[[${article.articleId}]])">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table><br>
                    <nav>
                        <ul class="pagination justify-content-end">
                            <li class="page-item"><a class="page-link" th:href="'articleList?pageNum=1'">首页</a></li>
                            <li class="page-item"><a class="page-link" th:href="'articleList?pageNum='+${aList.prePage}">上一页</a></li>
                            <!--遍历条数-->
                            <!--<li class="page-item" th:each="nav:${articleList.navigatepageNums}">-->
                            <!--<a class="page-link" th:href="'list?pageNum='+${nav}" th:text="${nav}" th:if="${nav != articleList.pageNum}"></a>-->
                            <!--</li>-->
                            <li class="page-item"><a class="page-link" href="#" th:text="${aList.pageNum}"></a></li>
                            <li class="page-item"><a class="page-link" th:href="'articleList?pageNum='+${aList.nextPage}">下一页</a></li>
                            <li class="page-item"><a class="page-link" th:href="'articleList?pageNum='+${aList.pages}">尾页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>
        <!-- 版权 -->
        <footer th:replace="admin/footer :: common_footer" class="footer"></footer>
    </div>
</div>
<!-- 删除弹框-->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">您确定要删除，不再考虑一下吗？</div>
            <div class="modal-footer">
                <input type="hidden" id="delInput">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="del('articleDel','delInput')">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>